---
import type useIcon from "@/hooks/useIcon";
import useTypeTranslate from "@/hooks/useTypeTranslate";
export interface Props {
  item: Exclude<ReturnType<typeof useIcon>, undefined>;
  property?: Record<string, string>;
  class?: string;
}

const {
  item: { name, maxStackSize, type, CreativeTabName, largeIcon, registerName },
  property = {},
} = Astro.props;

let regComponent = registerName.split(":");
---

<div
  class="w-full flex flex-col items-center rounded-md bg-white/40 shadow-md p-1"
>
  <div
    class="flex justify-center items-center font-bold w-full bg-[var(--theme-color)] text-white py-3 px-1 text-xl text-center"
  >
    {name}
  </div>
  <img
    src={largeIcon}
    width="128"
    height="128"
    class="my-4 !bg-transparent"
    alt={name}
  />
  {
    Object.entries(
      Object.assign(property || {}, {
        所属物品栏: CreativeTabName,
        最大堆叠数量: maxStackSize,
        命名空间ID: (
          <code class="bg-[rgba(45,48,53,0.3)] font-['Microsoft YaHei'] px-1 my-2">
            {[`${regComponent[0]}:`, <br />, regComponent[1]]}
          </code>
        ),
      })
    ).map(([k, v]) => (
      <div
        class={`
          item
          flex w-full text-[15px]
        `}
      >
        <div class="flex justify-center items-center w-1/2 min-h-[48px] font-bold">
          {k}
        </div>
        <div class="flex justify-center items-center w-1/2 min-h-[48px] break-all text-center">
          {v}
        </div>
      </div>
    ))
  }
</div>

<style lang="scss">
  .item:nth-child(2n + 1) {
    background-color: rgba(34, 34, 34, 0.2);
  }
</style>
